<template>
    <div class='box'>
        <h1>{{msg}}</h1>
    </div>
</template>

<script>
    export default {
        name:'HeaderNav',
        data(){
            return {
                msg:'nihao'
            }
        }
    }
</script>

<style scoped>
/*
    scoped 代表在这个组件中使用这个box类名的样式（当多个组件中类名冲突时，也可以说，为了避免为了避免多个组件中同类名起冲突所产生的覆盖效果！)
*/
        .box{
            width:100px;
            height:30px;
            background-color:red;
        }
</style>